import { MessageOutlined } from "@ant-design/icons";
import { Flex, Menu, MenuProps } from "antd";
import { memo, useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import imgLogo from "../../assets/img/logo.png";
import { RouterPath } from "../../router";
import "./head.css";

type MenuItem = Required<MenuProps>["items"][number];

const Head = () => {
  const [menCurrent, setMenCurrent] = useState(RouterPath.head_page);
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    setMenCurrent(location.pathname);
  }, [location.pathname]);

  const onMenuClick: MenuProps["onClick"] = (e) => {
    if (
      ["1", "2", "3", "4", "5", "6"].includes(e.key) ||
      e.key === menCurrent
    ) {
      return;
    }
    setMenCurrent(e.key);
    // let path = "";
    // switch (e.key) {
    //   case "首页":
    //     path = RouterPath.head_page;
    //     break;
    //   case "学习路线":
    //     path = RouterPath.learn_rout_page;
    //     break;
    // }
    // navigate(path, { replace: true });

    navigate(e.key, { replace: true });
  };

  const gotoLogiin = () => {
    console.log("gotoLogiin");
  };

  const gotoRegister = () => {
    console.log("gotoRegister");
  };

  return (
    <Flex className="layout" justify="space-between" align="center">
      <Flex className="title_Frist">
        <img className="title_img" src={imgLogo} alt="logo" />
        {/* <NameList /> */}
        <Menu
          className="menu"
          onClick={onMenuClick}
          selectedKeys={[menCurrent]}
          mode="horizontal"
          items={items}
        />
      </Flex>
      <Flex className="login_div" align="center">
        <div className="button" onClick={gotoLogiin}>
          登录
        </div>
        <div className="button">·</div>
        <div className="button" onClick={gotoRegister}>
          注册
        </div>
        <MessageOutlined className="message_icon" />
      </Flex>
    </Flex>
  );
};

export default memo(Head);

const items: MenuItem[] = [
  {
    label: "首页",
    key: RouterPath.head_page,
  },
  {
    label: "鸿蒙开发",
    key: "1",
  },
  {
    label: "学习路线",
    key: RouterPath.learn_rout_page,
  },
  {
    label: "广场",
    key: RouterPath.square,
  },
  {
    label: "导航",
    key: "2",
  },
  {
    label: "教程",
    key: "3",
  },
  {
    label: "问答",
    key: "4",
  },
  {
    label: "公众号",
    key: "5",
  },
  {
    label: "工具",
    key: "6",
  },
];

const NameList = memo(() => {
  const [data, setData] = useState(["111", "222", "333"]);
  const click = (item: string) => {
    console.log("click", item);
  };

  return (
    <Flex className="name_list">
      {data.map((item) => (
        <div onClick={() => click(item)}>{item}</div>
      ))}
    </Flex>
  );
});
